////
/// Components
/// StackedList
////

@import 'utils/shared/layout';
@import 'utils/shared/typography';
@import 'components/Handle/props';
@import 'components/Heading/props';
@import 'components/Patterns/props';
@import 'props';

.StackedListWrapper {
  @include stripes-bg;
  position: relative;
  color: get-color(coal, dark);
  box-shadow: inset 0 0 0 get-border(thin) currentColor;
  // `draggable-container-parent--capacity` changes the `color` on `StackedListWrapper`...
  // This is supposed to "trickle" down and cause all children to transition color as well...
  // Problem is, sometimes these transitions seem to collide and we don't get syncronised timing...
  // Sadly, there is no way to target `box-shadow`'s color without the use of currentColor.
  // transition: color get-duration(fast) get-easing();

  @media screen and (min-width: get-breakpoint(tablet)) {
    box-shadow: inset 0 0 0 get-border() currentColor;
  }
}

.StackedListHeader,
.StackedListContent {
  // cannot be `min-height`, as a child's `height: 100%` will not work
  // by using `height`, we will get visible scrollbars
  height: stacked-list-item();

  @media screen and (min-width: get-breakpoint(desktop)) {
    height: stacked-list-item(base, desktop);
  }
}

.StackedListHeader {
  padding: stacked-list-header(padding);
  background-color: currentColor;
  transition: color get-duration(fast) get-easing();

  @media screen and (min-width: get-breakpoint(tablet)) {
    padding: stacked-list-header(padding, tablet);
  }

  p {
    margin-top: 0.2em;
    font-size: get-type-scale(paragraph);
    color: white;

    @media screen and (min-width: get-breakpoint(tablet)) {
      font-size: get-type-scale(paragraph, tablet);
    }

    @media screen and (min-width: get-breakpoint(desktop)) {
      font-size: get-type-scale(paragraph, desktop);
    }
  }
}

.StackedList {
  position: relative;
  margin-top: -(get-border(thin));

  @media screen and (min-width: get-breakpoint(tablet)) {
    margin-top: -(get-border());
  }

  &::before {
    @include visible(false);
    @include position-cover;
    @include Heading;
    @include HeadingSize4;
    @include text-no-select;
    // stylelint-disable-next-line shopify/content-no-strings
    content: 'drop items here';
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 80%;
    height: 80%;
    background-color: white;
    transition: opacity get-duration() get-easing(), visibility get-duration() get-easing();
  }

  &:empty {
    &::before {
      @include visible;
    }
  }
}

.StackedListItem {
  cursor: get-cursor();

  &:nth-child(1n + 2) {
    margin-top: -(get-border(thin));

    @media screen and (min-width: get-breakpoint(tablet)) {
      margin-top: -(get-border());
    }
  }

  .draggable--original:first-child + & {
    margin-top: 0;
  }
}

.StackedListContent {
  position: relative;
  display: flex;
  align-items: center;
  padding: get-spacing(tighter);
  color: currentColor;
  background-color: get-color(ash, light);
  border: get-border(thin) solid currentColor;
  transition: color get-duration(fast) get-easing(),
    background-color get-duration(fast) get-easing(), transform get-duration() get-easing(bungie);

  @media screen and (min-width: get-breakpoint(tablet)) {
    border-width: get-border();
  }

  .Heading {
    flex: 1 1 auto;
  }

  .DragHandle,
  .NopeHandle {
    flex: 0 0 $handle-size;
    margin-left: get-spacing(tight);
  }

  // top border psuedo element... solution to create a collapsed border
  // required to make the hover style highlight each side of the element
  &::before {
    content: '';
    position: absolute;
    top: -(get-border(thin));
    right: -(get-border(thin));
    left: -(get-border(thin));
    display: block;
    height: get-border(thin);
    background-color: currentColor;
    opacity: 0;
    transition: color get-duration(fast) get-easing(), opacity get-duration(fast) get-easing();

    @media screen and (min-width: get-breakpoint(tablet)) {
      top: -(get-border());
      right: -(get-border());
      left: -(get-border());
      height: get-border();
    }
  }
}

@import 'variants';
